import React, { useState } from 'react';
import { Modal, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

interface SimpleDialogProps {
    visible: boolean;
    title?: string;
    message?: string;
    onClose: () => void;
    onConfirm?: () => void;
    confirmText?: string;
    cancelText?: string;
}

const SimpleDialog: React.FC<SimpleDialogProps> = ({
    visible,
    title = '提示',
    message = '',
    onClose,
    onConfirm,
    confirmText = '确定',
    cancelText = '取消',
}) => {
    return (
        <Modal
            transparent
            visible={visible}
            animationType="fade"
            onRequestClose={onClose}
        >
            <View style={styles.overlay}>
                <View style={styles.dialog}>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.message}>{message}</Text>
                    <View style={styles.buttonRow}>
                        <TouchableOpacity style={styles.button} onPress={onClose}>
                            <Text style={styles.buttonText}>{cancelText}</Text>
                        </TouchableOpacity>
                        {onConfirm && (
                            <TouchableOpacity
                                style={[styles.button, styles.confirmButton]}
                                onPress={onConfirm}
                            >
                                <Text style={[styles.buttonText, styles.confirmText]}>
                                    {confirmText}
                                </Text>
                            </TouchableOpacity>
                        )}
                    </View>
                </View>
            </View>
        </Modal>
    );
};

// 示例用法
export default function ModalDemo() {
    const [visible, setVisible] = useState(false);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <TouchableOpacity onPress={() => setVisible(true)}>
                <Text>打开Dialog</Text>
            </TouchableOpacity>
            <SimpleDialog
                visible={visible}
                title="温馨提示"
                message="这是一个简易的Dialog页面。"
                onClose={() => setVisible(false)}
                onConfirm={() => {
                    setVisible(false);
                    // 这里可以添加确认后的逻辑
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.3)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    dialog: {
        width: 280,
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 20,
        elevation: 5,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 12,
        textAlign: 'center',
    },
    message: {
        fontSize: 16,
        marginBottom: 20,
        textAlign: 'center',
    },
    buttonRow: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    button: {
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    buttonText: {
        fontSize: 16,
        color: '#666',
    },
    confirmButton: {
        marginLeft: 8,
    },
    confirmText: {
        color: '#007AFF',
        fontWeight: 'bold',
    },
});